<template>
  <el-container direction="vertical">
  <Header/>
  <el-row style="width:90%;margin:auto;">
    <el-col :span="6" style="box-shadow: 5px 10px 35px rgb(69, 66, 66)">
      <!-- 商品的大图 -->
      <img v-if="brand" :src="'http://127.0.0.1:3001/images/'+brand.img" alt="" style="width:100%;height:100%">
    </el-col>
    <el-col :span="4">
    </el-col>
    <el-col :span="14" style="float:right">
      <el-row v-if="brand"  style="color:red;font-size:30px;">品牌：{{ brand.name }}</el-row>
      <br>
      <el-row v-if="brand"  style="color:red;font-size:20px;">
        <el-col :span='5'>国家：{{ brand.country }}</el-col>
        <el-col :span='6'>创建年份：{{ brand.year }}年</el-col>
        <el-col :span='9'>创始人：{{ brand.founder }}</el-col>
      </el-row>
      <br>
      <el-row style="font-size:20px;font-family:cursive">
        <el-col v-if="brand" :span='24'>
          品牌故事：{{ brand.msg }}
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <br><br>


  <!-- <el-row style="background-color:#719CC6;color:white;height:50px;border-radius:30px;width:100%">
    <p style="color:white;margin-left:20px">品牌：{{brand.name}}</p>
</el-row> -->
<br>
<br>
  <Footer/>
  </el-container>

</template>

<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";


export default {
  props:{
        //自定义名为cid的属性，用来接收父组件传过来的数据
        cid:{
            type:Number, //指定cid的数据类型
            default:()=>5 //指定cid的默认值
        }
    },
    data(){
    return{
      brand:null,
      // num:1,
    };
  },
    mounted() {
        this.fetchBrandDetail();
    },
    methods:{
        fetchBrandDetail() {
          this.axios
        .post('/api/goods/brandsdetail', { bid: this.$route.params.bid })
        .then(res => {
          this.brand = res.data.data; 
        })
        .catch(err => {
          console.error(err.response ? err.response.data : err.message);
        });
        }
    },
  components:{
    Header,
    Footer,
  }
}
</script>

<style>

</style>